<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SLANet OCR</title>
</head>
<body>
  <h2>上传图片识别表格文字</h2>
  <form id="ocr-form" enctype="multipart/form-data">
      {% csrf_token %}
    <input type="file" id="image" name="image" accept="image/*" required>
    <button type="submit">识别</button>
  </form>
  <h3>识别结果：</h3>
  <pre id="result"></pre>
  <script>
    document.getElementById('ocr-form').addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData();
      const imageFile = document.getElementById('image').files[0];
      if (!imageFile) {
        alert('请选择图片');
        return;
      }
      formData.append('image', imageFile);
      fetch('/ocr_slanet/', {  // ← 注意路径必须和 Django 路由一致
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        if (data.status === 'success') {
          document.getElementById('result').textContent = JSON.stringify(data.results, null, 2);
        } else {
          document.getElementById('result').textContent = '识别失败：' + (data.error || '未知错误');
        }
      })
      .catch(error => {
        document.getElementById('result').textContent = '请求错误：' + error.message;
      });
    });
  </script>
</body>
</html>
